<template>
    <div class="login_container">
        <div class="login_form">
            <h3 class="title">カード利用明細システム</h3>
            <el-form ref="formRef" :model="loginForm" :rules="rules">
                <el-form-item prop="account">
                    <el-input v-model="loginForm.account" placeholder="アカウント・メールアドレス・電話番号を入力">
                        <template #prefix>
                            <el-icon class="el-input__icon"><User /></el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="loginForm.password" type="password" placeholder="パスワードを入力">
                        <template #prefix>
                            <el-icon class="el-input__icon"><Lock /></el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <div class="rememberMe">
                    <el-text class="forgetpass mx-1" type="primary">登録できない場合</el-text>
                </div>
                <el-divider>その他登録</el-divider>
                <div class="other_login">
                    <el-icon class="other_login_item"><ChromeFilled /></el-icon>
                    <el-icon class="other_login_item"><ElemeFilled /></el-icon>
                    <el-icon class="other_login_item"><WindPower /></el-icon>
                </div>
                <el-form-item>
                    <el-button style="width: 100%;" type="primary" @click="handleLogin">登録</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { login } from '@/apis/user';
import { ElMessage } from 'element-plus';
import 'element-plus/theme-chalk/el-message.css';
import { useRouter } from 'vue-router';

const loginForm = ref({
    account: '',
    password: '',
});

const rules = reactive({
    account: [
        { required: true, message: 'アカウント未入力です。', trigger: 'blur' },
    ],
    password: [
        { required: true, message: 'パスワード未入力です。', trigger: 'blur' },
        { min: 6, message: 'パスワードは６桁以上を入力ください。', trigger: 'blur' }
    ]
});

const router = useRouter();
const formRef = ref(null);

const handleLogin = () => {
    formRef.value.validate((valid) => {
        if (valid) {
            
            login(loginForm.value).then((res) => {
                console.log(res);
                if(res.data.code == 200) {
                    localStorage.setItem('token',res.data.token);
                    console.log('userName===========>',res.config.data.account);
                    const requestData = JSON.parse(res.config.data);
                    console.log('userName===========>', requestData.account);
                    localStorage.setItem('userName', requestData.account);
                    ElMessage.success('登録成功！');
                    router.push("/home");
                } else {
                    ElMessage.error('登録失败：アカウントまたはパスワードが間違いです。');
                }
            });
        } else {
            ElMessage.error('登録失败：アカウントまたはパスワードが間違いです。');
        }
    });
};

onMounted(() => {
    localStorage.removeItem('token');
})
</script>

<style lang="scss" scoped>
.login_container {
    // 背景图
    background-image: url('../assets/bgimg/1.jpg');
    background-size: 100%;
    height: 97vh;
    display: flex;
    justify-content: flex-end;
    .login_form {
        display: flex;
        justify-content: center;
        align-items: center;
        //设置换行
        flex-direction: column;
        width: 50%;
        background-color: #fff;

        .title {
            margin-bottom: 20px;
        }
        .rememberMe {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .forgetpass {
                cursor: pointer;
            }
        }
        // 其他登录
        .other_login {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
            .other_login_item {
                margin-right: 60px;
                cursor: pointer;
            }
        }

    }
}

// 设置form的宽度
.el-form {
    width: 60%;
}
.el-form-item {
    width: 100%;
}

</style>
